<template>
  <!--  jiera-->
  <div class='bg-white rounded'>
    <div class='w-full h-10 bg-gradient-to-r from-[#c0e3ff] to-blue-200 leading-10'
    >🔥 热门贴
    </div>
    <div style='height:350px'>
      <div
        v-for='item in taskListData'
        :key='item.id'
        @click.stop='!!true?()=>taskDetail(item.id as number):()=>{}'
        v-login='!!true?()=>taskDetail(item.id as number):undefined'
      >
        <div style='font-size: 18px;'>{{ item.title }}
          <div class='flex items-center gap-1 text-gray-400 text-xs' style='display: inline-block;'>
            <svg
              viewBox='64 64 896 896'
              focusable='false'
              data-icon='fire'
              width='1em'
              height='1em'
              fill='currentColor'
              aria-hidden='true'
              xmlns='http://www.w3.org/2000/svg'
            >
              <path
                d='M834.1 469.2A347.49 347.49 0 00751.2 354l-29.1-26.7a8.09 8.09 0 00-13 3.3l-13 37.3c-8.1 23.4-23 47.3-44.1 70.8-1.4 1.5-3 1.9-4.1 2-1.1.1-2.8-.1-4.3-1.5-1.4-1.2-2.1-3-2-4.8 3.7-60.2-14.3-128.1-53.7-202C555.3 171 510 123.1 453.4 89.7l-41.3-24.3c-5.4-3.2-12.3 1-12 7.3l2.2 48c1.5 32.8-2.3 61.8-11.3 85.9-11 29.5-26.8 56.9-47 81.5a295.64 295.64 0 01-47.5 46.1 352.6 352.6 0 00-100.3 121.5A347.75 347.75 0 00160 610c0 47.2 9.3 92.9 27.7 136a349.4 349.4 0 0075.5 110.9c32.4 32 70 57.2 111.9 74.7C418.5 949.8 464.5 959 512 959s93.5-9.2 136.9-27.3A348.6 348.6 0 00760.8 857c32.4-32 57.8-69.4 75.5-110.9a344.2 344.2 0 0027.7-136c0-48.8-10-96.2-29.9-140.9zM713 808.5c-53.7 53.2-125 82.4-201 82.4s-147.3-29.2-201-82.4c-53.5-53.1-83-123.5-83-198.4 0-43.5 9.8-85.2 29.1-124 18.8-37.9 46.8-71.8 80.8-97.9a349.6 349.6 0 0058.6-56.8c25-30.5 44.6-64.5 58.2-101a240 240 0 0012.1-46.5c24.1 22.2 44.3 49 61.2 80.4 33.4 62.6 48.8 118.3 45.8 165.7a74.01 74.01 0 0024.4 59.8 73.36 73.36 0 0053.4 18.8c19.7-1 37.8-9.7 51-24.4 13.3-14.9 24.8-30.1 34.4-45.6 14 17.9 25.7 37.4 35 58.4 15.9 35.8 24 73.9 24 113.1 0 74.9-29.5 145.4-83 198.4z'
              ></path>
            </svg>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script lang='ts' setup>

import { onMounted } from 'vue'
import { useRouter } from 'vue-router'

const taskListData = ref([])
const pagination = ref({
  pageSize: 10,
  pageNum: 1,
  total: 0,
})

// 获取热门任务列表
const getTaskListData = async () => {
  const queryData = {
    type: 5,
    x: undefined,
    y: undefined,
    pageSize: pagination.value.pageSize,
    pageNum: pagination.value.pageNum,
  }
  const result = await service.task.list(queryData)
  // 假设接口返回的结果中数据在list属性里，且每个元素有title属性
  if (result.list && result.list.length > 0) {
    taskListData.value = result.list
  } else {
    taskListData.value = []
  }
}


onMounted(async () => {
  getTaskListData()
})

const router = useRouter()

const taskDetail = (id: number) => {
  router.push(`/main/task/${id}`)
}
</script>
